import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "umi"; // dva 仓库
import { setCart } from "@/utils/index"; // 购物车商品数量存缓存 做redux持久化
import { DeleteOutline } from "antd-mobile-icons";
import {
  clearCart,
  isCheckedApi,
  updateCart,
  removeCart,
  checkCart,
} from "@/api";
import {
  NavBar,
  Space,
  Card,
  Checkbox,
  Button,
  Image,
  Ellipsis,
  Stepper,
  SwipeAction,
  Dialog,
  Toast,
  PullToRefresh,
} from "antd-mobile"; // 组件
import { MoreOutline } from "antd-mobile-icons"; // Icon图标
import { history } from "umi"; // 路由
import "./assets/style.scss";
import axios from "axios";
export default function index() {
  const dispatch = useDispatch(); // 使用 dispatch 设置仓库 值
  const setStore = (num: Number) => {
    // 封装函数setStore, 使用 dispatch 设置仓库 值
    dispatch({
      type: "cart/setCartLength",
      num,
    });
  };
  /* 头部 点击返回上一页 */
  const backLast = () => {
    // history 相当于 vue3组合式API中的 router 有push/go/back...等方法
    history.go(-1);
  };
  // 存储 头部右侧icon 数据
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <MoreOutline onClick={() => alert("点击！！！")} />
      </Space>
    </div>
  );
  /* 商品卡片 */
  const [totalPrice, setTotalPrice] = useState<Number>(0);
  const [value, setValue] = useState<Array<number>>([]);
  const [cartLists, setCartLists] = useState<Array<any>>([]);
  const [isCheck, setIsCheck] = useState(0);

  // 步进器 修改后端商品数量
  const setStepper = (number: Number, key: any) => {
    updateCart([
      {
        count: number,
        productId: parseInt(key),
      },
    ]).then((res: any) => {
      if (res.data.code == "200") {
        featchCart();
        addPrice();
      }
    });
  };
  // 修改单个商品选中
  const updateCarts = async (selected: any, key: any) => {
    if (selected) {
      setIsCheck(1);
    }
    const res = await isCheckedApi({ isCheck, cartId: key });
    if (res.data.code == "200") {
      featchCart();
      addPrice();
    }
  };
  // 全部选中
  const allSelected = (selected: Boolean) => {
    axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        token: localStorage.getItem("token"),
      },
      method: "get",
      url: "http://43.139.124.13:8888/cart/getCartList",
    })
      .then((res) => {
        if (res.data.code == "200") {
          // 获取所有商品的id
          const allList: any[] = [];
          res.data.data.forEach((item: { id: number }) => {
            allList.push(item.id);
          });
          // 获取所有商品的选中与否
          const isCheckArr: any[] = [];
          res.data.data.forEach((item: { isCheck: number }) => {
            isCheckArr.push(item.isCheck);
          });
          allList.forEach((item) => {
            isCheckedApi({ cartId: item, isCheck: selected ? 1 : 0 });
          });
        }
      })
      .then(() => {
        featchCart();
        addPrice();
      });
  };
  // 初始化渲染购物车商品
  const featchCart = async () => {
    const res = await axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        token: localStorage.getItem("token"),
      },
      method: "get",
      url: "http://43.139.124.13:8888/cart/getCartList",
    });
    if (res.data.code == "200") {
      setCart(res.data.data.length);
      setStore(res.data.data.length);
      const arry = res.data.data.filter((item: any) => {
        return item.isCheck;
      });
      setValue([...arry]);
      setCartLists(res.data.data); // 存储购物车商品数据
    }

    // readCart().then((res: any) => {
    //   if (res.data.code === 0) {
    //     setCart(res.data.data.items.length); // 购物车商品数量 存缓存
    //     setStore(res.data.data.items.length); // 购物车商品数量 存仓库
    //     const arry = res.data.data.items.filter((title: any) => {
    //       return title.selected;
    //     });
    //     setValue([...arry]);
    //     setCartLists(res.data.data.items); // 存储购物车商品数据
    //     setTotalPrice(res.data.data.price); // 修改总价格
    //   }
    //   if (res.data.code === 700) {
    //     setValue([]);
    //     setCartLists([]); // 存储购物车商品数据
    //     setTotalPrice(0); // 修改总价格
    //     setCart(0); // 购物车商品数量 存缓存
    //     setStore(0); // 购物车商品数量 存仓库
    //   }
    // });
  };
  // 滑动 删除单个商品
  const oneUpdateCart = async (key: String) => {
    const res = await axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        token: localStorage.getItem("token"),
      },
      method: "delete",
      url: "http://43.139.124.13:8888/cart/deleteCart",
      data: { cartId: key },
    });
    if (res.data.code == "200") {
      featchCart();
      addPrice();
    }

    // removeCart({
    //   key,
    // }).then((res: any) => {
    //   if (res.data.code === 0) {
    //     featchCart();
    //   }
    // });
  };
  // 清空购物车
  const clearCarts = () => {
    Dialog.confirm({
      content: "您确定删除吗？",
      onConfirm: () => {
        // 获取购物车中商品的id
        axios({
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            token: localStorage.getItem("token"),
          },
          method: "get",
          url: "http://43.139.124.13:8888/cart/getCartList",
        }).then((res) => {
          const allList: any[] = [];
          res.data.data.forEach((item: { id: number }) => {
            allList.push(item.id);
          });
          allList.forEach((item) => {
            console.log(item);
            axios({
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
                token: localStorage.getItem("token"),
              },
              method: "delete",
              url: "http://43.139.124.13:8888/cart/deleteCart",
              data: { cartId: item },
            }).then(() => {
              featchCart();
              addPrice();
            });
          });
        });
        // clearCart().then((res: any) => {
        //   if (res.data.code === 0) {
        //     Toast.show({
        //       content: "删除成功!",
        //       duration: 1500,
        //       afterClose: () => {
        //         history.go(0);
        //       },
        //     });
        //   }
        // });
      },
    });
  };
  // 计算总价
  /** 首先获取选中的商品，那些商品被选中了 放到一个数组里面 */
  // 然后通过获取这些被选中商品的价格进行加减然后得出总价，在加载页面的时候就需要调用一次
  const addPrice = () => {
    // 发起获取购物车所有商品的请求
    axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        token: localStorage.getItem("token"),
      },
      method: "get",
      url: "http://43.139.124.13:8888/cart/getCartList",
    })
      .then((res: any) => {
        const isCheckList: any[] = [];
        res.data.data?.map((item: any) => {
          if (item.isCheck) {
            isCheckList.push(item);
          }
        });
        console.log(isCheckList);
        // 每个商品的总价
        const sum: number[] = [];
        isCheckList.forEach((item) => {
          const sumList = item.count * item.product.price;
          sum.push(sumList);
        });
        console.log(sum);
        // 获取价格
        const total = eval(sum.join("+"));
        total ? setTotalPrice(total) : setTotalPrice(0);
      })
      .then(() => {
        featchCart();
      });
  };
  // useEffect 钩子
  useEffect(() => {
    featchCart();
    addPrice();
  }, []);
  return (
    <div className="cartBoxxx">
      {/* 头部导航 */}
      <NavBar right={right} onBack={backLast}>
        购物车
      </NavBar>
      {/* 内容区 */}
      <div className="cartContent">
        {/*全选 商品卡片*/}
        <Card
          extra={
            useSelector((state: any) => state.cart.cartNumbers) === 0 ? (
              <></>
            ) : (
              <DeleteOutline
                color="var(--adm-color-primary)"
                fontSize={18}
                onClick={() => {
                  // 垃圾桶 点击事件
                  clearCarts();
                }}
              />
            )
          }
          style={{ height: "50PX" }}
          title={
            <Checkbox
              indeterminate={
                value.length > 0 && value.length < cartLists.length
              }
              checked={value.length === cartLists.length}
              onChange={(checked) => {
                /* checked true全选  false取消全选 */
                if (checked) {
                  setValue(cartLists);
                  allSelected(checked);
                } else {
                  allSelected(checked);
                  setValue([]);
                }
              }}
            >
              全选
            </Checkbox>
          }
        ></Card>
        {/* 单选 商品卡片 */}
        {cartLists.map((element) => {
          return (
            <SwipeAction
              key={element.id}
              closeOnAction={true}
              closeOnTouchOutside={true}
              rightActions={[
                {
                  key: "delete",
                  text: "删除",
                  color: "danger",
                  onClick: async () => {
                    await Dialog.confirm({
                      content: "确定要删除吗？",
                      onConfirm: () => {
                        oneUpdateCart(element.id);
                      },
                    });
                  },
                },
              ]}
            >
              <Card
                title={
                  <Checkbox.Group
                    value={value}
                    onChange={(v) => {
                      // 单选按钮
                      setValue(v as any[]);
                    }}
                  >
                    {
                      <Checkbox
                        value={element}
                        onChange={(bool) => {
                          // 切换单个商品选中状态
                          updateCarts(bool, element.id);
                        }}
                      ></Checkbox>
                    }
                  </Checkbox.Group>
                }
              >
                <Image src={element.product.image} width={50} />
                <div className="contentCarts">
                  <div className="contentLeft">
                    <Ellipsis direction="end" content={element.product.name} />
                    <span>{`￥${element.product.price}`}</span>
                  </div>
                  <div className="contentRight">
                    <div></div>
                    <Stepper
                      allowEmpty
                      min={0}
                      value={element.count}
                      onChange={(value) => {
                        // 步进器 修改商品数量
                        setStepper(value, element.productId);
                      }}
                    ></Stepper>
                  </div>
                </div>
              </Card>
            </SwipeAction>
          );
        })}
        {/* 提交订单部分 */}
        <div className="submitCart">
          {/* 全选部分 */}
          <div className="leftCart">
            {
              <Checkbox
                indeterminate={
                  value.length > 0 && value.length < cartLists.length
                }
                checked={value.length === cartLists.length}
                onChange={(checked) => {
                  if (checked) {
                    setValue(cartLists);
                    allSelected(checked); // 全部选中 checked--->true
                  } else {
                    allSelected(checked); // 全部不选中 checked--->false
                    setValue([]);
                  }
                }}
              >
                全选
              </Checkbox>
            }
          </div>
          <div className="rightCart">
            <div className="priceBox">
              <span>总计：</span>
              <p>{`￥${totalPrice}`}</p>
            </div>
            <Button color="danger">领劵结算</Button>
          </div>
        </div>
      </div>
      {/* </PullToRefresh> */}
    </div>
  );
}
